<ti-dominator
  [id]="appendId('cascader_dominator')"
  [placeholder]="placeholder"
  [disabled]="disabled"
  (click)="onDominatorClick()"
  [clearable]="clearable"
  [(ngModel)]="dominatorModel"
  (clear)="onClear()"
  [inputtable]="searchable"
  (inputChange)="onSearch($event)"
>
  <ng-template #item>
    <span [title]="dominatorModel">{{dominatorModel}}</span>
  </ng-template>
</ti-dominator>
<ti-drop [dominatorElem]="dominatorCom.nativeElement" panelWidth="auto" [panelHeight]="panelHeight">
  <!-- 有选项数据 -->
  <ng-container *ngTemplateOutlet="pannelTemplate; context: {$implicit: itemsArr[0], panelIndex: 0}"> </ng-container>
  <ng-container *ngTemplateOutlet="pannelTemplate; context: {$implicit: itemsArr[1], panelIndex: 1}"> </ng-container>
  <ng-container *ngTemplateOutlet="pannelTemplate; context: {$implicit: itemsArr[2], panelIndex: 2}"> </ng-container>
</ti-drop>

<ng-template #pannelTemplate let-options let-panelIndex="panelIndex">
  <ng-container *ngIf="trigger === 'click' else hover">
    <ti-list
      #commonList
      [id]="appendId('list_' + panelIndex)"
      [ngStyle]="{width: panelWidth}"
      class="tp-cascader-list"
      [options]="options"
      [labelKey]="labelKey"
      [idKey]="idKey"
      [showChildren]="false"
      (select)="onSelect($event, panelIndex)"
      [(ngModel)]="listModel[panelIndex]"
      (mouseleave)="onMouseleave(panelIndex)"
    ></ti-list>
  </ng-container>
  <ng-template #hover>
    <ti-list
      #commonList
      [id]="appendId('list_' + panelIndex)"
      [ngStyle]="{width: panelWidth}"
      class="tp-cascader-list"
      [options]="options"
      [labelKey]="labelKey"
      [idKey]="idKey"
      [showChildren]="false"
      (select)="onSelect($event, panelIndex)"
      [(ngModel)]="listModel[panelIndex]"
      (optionMouseenter)="onMouseenter($event, panelIndex)"
    ></ti-list>
  </ng-template>
</ng-template>

<ng-container>
  <!-- 无数据或者搜索 -->
  <ti-droplist
    #wideDroplist
    [dominatorElem]="dominatorCom.nativeElement"
    [options]="wideDroplistOptions"
    [idKey]="idKey"
    [(ngModel)]="wideDroplistModel"
    (ngModelChange)="wideDroplistChange($event)"
    (select)="onWideDroplistSelect()"
  ></ti-droplist>
</ng-container>
